/*
 * define the billboard and now just a board not move and rotation with the camera
 */
billboard_vertex = '\
	#ifdef GL_ES \n\
	precision highp float; \n\
	#endif \n\
	attribute vec3 position; \n\
	attribute vec2 texCoord; \n\
	\n\
	varying vec2 vTexCoord; \n\
	\n\
	uniform mat4 view; \n\
	uniform mat4 projection; \n\
	\n\
	void main(void) { \n\
		vec4 worldPosition = view * vec4(position, 1.0); \n\
		vTexCoord = texCoord; \n\
		gl_Position =  vec4(position, 1.0); \n\
	} \n\
	';

billboard_fragment = '\
	#ifdef GL_ES \n\
	precision highp float; \n\
	#endif \n\
	varying vec2 vTexCoord; \n\
	uniform sampler2D texture; \n\
	\n\
	void main(void) { \n\
		vec4 diffuseColor = texture2D(texture, vTexCoord); \n\
		gl_FragColor = vec4 ( diffuseColor.rgb, diffuseColor.a ); \n\
	} \n\
	';

var billboard_attribs  = ['position', 'texCoord'];
var billboard_uniforms = ['view', 'projection', 'texture'];

var billboard_url	   = "textures/sky/skybillboard.jpg";

var billboard_verts    = [ 	-1.0,  1.0, 0.0, 0.0, 0.0,
                            -1.0, -1.0, 0.0, 0.0, 1.0,
                            1.0, -1.0, 0.0, 1.0, 1.0,
                            1.0, 1.0, 0.0, 1.0, 0.0 
                          ];
var billboard_indexs   	= [ 0,1,2,0,2,3 ];
var billboard_stride   	= 20; 

slBillboard = function( gl )
{
	this.gl = gl;
	this.vertexbuffer = null;
	this.indexbuffer  = null;
	this.indexcount	  = 0;
	this.shader		  = null;
	this.matrix	      = new slMatrix();
};

slBillboard.prototype.init = function()
{

	var gl = this.gl;
	var stage = {
			depthWrite : false,
			texture : null,
			program : null
	};
	
	// create the shader
	stage.program = slShader.compileProgram(gl, 
			billboard_vertex, billboard_fragment, billboard_attribs, billboard_uniforms);
	
	stage.texture = slShader.loadTextureUrl(gl, stage, billboard_url, function( texture )
			{
				stage.texture = texture;
			});
	
	this.shader = {
		cull   : gl.FONT,
		blend  : false,
		sort   : 0,
		stages : [stage]	
	};
	
	
	this.vertexbuffer = gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexbuffer);
	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(billboard_verts), gl.STATIC_DRAW);

	this.indexbuffer = gl.createBuffer();
	gl.bindBuffer( gl.ELEMENT_ARRAY_BUFFER, this.indexbuffer );
	gl.bufferData( gl.ELEMENT_ARRAY_BUFFER,  new Uint16Array(billboard_indexs), gl.STATIC_DRAW );	
	this.indexcount = billboard_indexs.length;
};

slBillboard.prototype.draw = function( context )
{
	if(  this.vertexbuffer == null || this.indexbuffer == null )
		return;
	// draw the elements
	var gl  = this.gl;
	var time = context.elapsedTime / 1000;
	var view_mat = context.view;
	var projection_mat = context.projection;
	if( this.shader )
	{
		gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexbuffer );
		gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexbuffer);
	
		if( slShader.setShader( gl, this.shader ) ) {
			
			for( var i = 0; i < this.shader.stages.length; ++i )
			{
				var stage = this.shader.stages[i];
				var shaderprogram = slShader.setShaderStage(gl, this.shader, stage, time);
				if( !shaderprogram )
					continue;
				
				this.bindAttribs( shaderprogram, view_mat, projection_mat );
				gl.drawElements(gl.TRIANGLES, this.indexcount, gl.UNSIGNED_SHORT, 0);
			}	
		}	
	}
};

slBillboard.prototype.bindAttribs = function( shader, view, projection )
{
	if( shader == null )
		return false;
	var gl = this.gl;
	
	slMatrixSet( this.matrix, view );
	
	gl.uniformMatrix4fv( shader.uniform.view, false, slMatrixAsFloat32Array( this.matrix ) );
	gl.uniformMatrix4fv( shader.uniform.projection, false, slMatrixAsFloat32Array( projection ));

	gl.enableVertexAttribArray( shader.attrib.position );
	gl.vertexAttribPointer(  shader.attrib.position, 3, gl.FLOAT, false, billboard_stride, 0 );
	
	if( shader.attrib.texCoord != -1 )
	{
		gl.enableVertexAttribArray( shader.attrib.texCoord );
		gl.vertexAttribPointer( shader.attrib.texCoord, 2, gl.FLOAT, false, billboard_stride, 3*4 );
	}
};






